<template>
	<view class="charge">
		<view class="balance">余额 {{ money }}</view>
		<view class="select-list">
			<view class="sel-text">请选择充值金额</view>
			<view class="sel-list">
				<view
				  class="sel-item"
					v-for="(item, index) in cashList"
					:key="index"
					:style="{ background: active == index ? '#ffe2d2' : '#fff' }"
					@click="selectItem(item, index)"
				>
					<view class="text-sel">
						<text class="unit">￥</text>
						<text class="text">{{ item }}</text>
					</view>
				</view>
				<view class="sel-item" @click="selectItem('', 5)" :style="{ background: active == 5 ? '#ffe2d2' : '#fff' }">
					<view class="text-sel">
						<input v-model="prices" type="digit" style="height: 80rpx" class="uni-input text" placeholder="更多金额 > 5元" placeholder-style="font-size: 28rpx" />
						<!-- <text class="unit">更多金额 > 5元 </text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="cash">
			<view class="">应付金额</view>
			<view class="">￥{{ price }}</view>
		</view>
		<button class="cash-btn" @tap="$u.throttle(rechargeCash, 3000)" >立即充值</button>
	</view>
</template>

<script>
	import { recharge, getWechatKey, payMoney } from '@/api/wallet.js'
	export default {
		data() {
			return {
				cashList: [5, 10, 20, 50, 100],
				active: 0,
				price: 5,
				money: '',
				prices: ''
			}
		},
		watch: {
			prices(val) {
				this.price = val
			}
		},
		onLoad(param) {
			console.log('pram', param)
			this.money = param.money
		},
		methods: {
			selectItem(item, index) {
				if(item) {
					this.price = item
				} else {
					this.price = this.prices
				}
				this.active = index;
			},
			rechargeCash() {
				if(this.price < 5) {
					uni.showToast({
						title: '金额不能小于5元！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'请稍后...'
				})
				let param = {
					appid: '073820240321128890',
					price: this.price
				};
				recharge(param).then(res => {
					console.log('res', res);
					const { jky_trade_no, out_trade_no } = res.data;
					let str = {
						appid: '073820240321128890',
						out_trade_no: out_trade_no,
						wx_id: 'gh_85adb5b7352f'
					}
					
					payMoney(str)
					return
					
					getWechatKey(str).then(key => {
						if(key && key.data) {
							uni.hideLoading()
							console.log('strt', key)
							const tt = key.data.package
							const {appId, nonceStr, paySign, signType, timeStamp } = key.data;
							uni.requestPayment({
							  provider: 'wxpay',
								timeStamp: timeStamp + '',
								nonceStr: nonceStr,
								package: tt,
								signType: signType,
								paySign: paySign,
								success: function (res) {
									console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '充值成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charge {
		margin: 60rpx 20rpx;
		
		.balance {
			font-size: #{$text-size};
			color: #{$one-title-color};
		}
		
		.select-list {
			margin-top: 70rpx;
			.sel-text {
				font-size: #{$text-size};
				color: #{$sub-color};
				margin-bottom: 40rpx;
			}
			
			.sel-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 700rpx;
				
				.active-item {
					width: 210rpx;
					height: 120rpx;
					background: #ffe2d2;
					border: 1px solid #f0f0f0;
					border-radius: 20rpx;
					text-align: center;
					// margin-right: 20rpx;
					margin-bottom: 32rpx;
				}
				
				.sel-item {
					width: 210rpx;
					height: 120rpx;
					background: #fff;
					border: inset 1px solid #f0f0f0;
					border-radius: 20rpx;
					text-align: center;
					// margin: 10rpx 10rpx;
					// margin-right: 20rpx;
					margin-bottom: 32rpx;
					
					.text-sel {
						margin-top: 20%;
						transform: translateY(-20%);
						color: #{$one-title-color};
						
						.unit {
							font-size: #{$explain-size};
						}
						.text {
							font-size: 48rpx;
						}
					}
				}
			}
		}
		
		.cash {
			font-size: #{$text-size};
			color: #{$one-title-color};
			margin-top: 8rpx;
			display: flex;
			justify-content: space-between;
			width: 700rpx;
		}
		
		.cash-btn {
			margin-top: 120rpx;
			border-radius: 50rpx;
			background-color: #{$main-color};
			color: #fff;
			width: 700rpx;
		}
		
	}
</style>